<template>
  <div >

    <el-form :inline="true" :model="where" class="demo-form-inline">
      <el-form-item label="商品名">
        <el-input v-model="where.name" placeholder="商品名"></el-input>
      </el-form-item>

      <el-form-item label="价格">
        <el-input v-model="where.price1" placeholder="最小值"></el-input>

      </el-form-item>
      <el-form-item label="至">

        <el-input v-model="where.price2" placeholder="最大值"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query">查询</el-button>
        <el-button type="primary" @click="add">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableDate" style="width: 100%">
      <el-table-column prop="id" label="编号"></el-table-column>
      <el-table-column prop="name" label="商品名称" ></el-table-column>
      <el-table-column prop="price" label="价格" ></el-table-column>

      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="del(scope.row)" type="text" size="small">删除</el-button>
          <el-button type="text" size="small "@click="mod(scope.row)">编辑</el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-pagination @current-change="queryPage"
      background
      layout="prev, pager, next"
      :total="pageObj.total">
    </el-pagination>

    <el-dialog title="编辑商品信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="编号" label-width="100px">
          <el-input v-model="form.id" autocomplete="off" disabled style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="商品名" label-width="100px">
          <el-input v-model="form.name" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="价格" label-width="100px">
          <el-input v-model="form.price" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="图片" label-width="100px">
          <el-upload
            action="http://127.0.0.1:8888/upload"
            :show-file-list="false"
            :on-success="uploaded">
            <img v-if="form.image" :src="form.image" alt="" style="height: 100px;aspect-ratio: 4/3">
            <i v-else class="el-icon-plus " style="width: 40px;aspect-ratio: 1/1;border: 1px solid #666;
          display: flex;justify-content: center;align-items: center;" ></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {methods} from "babel-plugin-transform-runtime/lib/definitions";
import axios from "axios";

export default {
  name: 'Product',
  data () {
return{
  tableDate:[],
  pageObj:{page:1,size:10,total:0},
  where:{name:"",price1:null,price2:null},
  dialogFormVisible:false,
  form:{id:null,name:"",price:0,image:""}

}
    },
   methods: {
     query() {
       this.$http.get("product/news", {
         params: this.where
       }).then(res => {
         this.pageObj = res.data;
         this.tableDate = res.data.data;
       })
     },
     queryPage(newPage) {
       this.pageObj.page = newPage;
       this.query();
     },

     del(row) {
       if (confirm('请确认是否删除')) {
         this.$http.get(`product/del?id=${row.id}`).then(res => {
           if (res.data.code === 1) {
             this.$message(res.data.msg);
             this.tableDate = this.tableDate.filter(a=>a.id!==row.id)
           } else {
      this.$alert(res.data.msg)
           }
         })
       }

     },
     mod(row) {
       this.form.id = row.id;
       this.form.name = row.name;
       this.form.price = row.price;
       this.form.image = row.image;
       this.dialogFormVisible = true;
     },
     add() {
       this.form.id = null;
       this.form.name = "";
       this.form.price = 0;
       this.form.image = null;
       this.dialogFormVisible = true;
     },
     save() {
       this.$http.get("product/save", {
         params: this.form
       }).then(res => {
         if (res.data.code === 1) {
           this.$message(res.data.msg);
           if (this.form.id == null) {
             this.tableDate.push({
               id: this.form.id,
               name: this.form.name,
               price: this.form.price,
               image: this.form.image,
             })
           } else {
             let p = this.tableDate.find(a => a.id === this.form.id);
             p.name=this.form.name
             p.price=this.form.price
             p.image=this.form.image
           }
           this.dialogFormVisible=false;
         } else {
           this.$alert(res.data.msg)
         }
       })
     },
     uploaded(response,file,fileList){
       this.form.image=response.data;
     }
   },
     created() {
       this.query();
     }

}

</script>


<style scoped>

</style>
